<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isAdd ? '手动新增顾客信息' : '修改顾客信息'"
    top="80px"
    width="750px"
    :close-on-click-modal="true"
    custom-class="edit-customer-dialog"
    :close-on-press-escape="false"
    @close="() => $emit('update:visible', false)"
  >
		<el-form
			ref="formRef"
			:model="customerInfoForm"
			label-width="80px"
		>
			<el-form-item :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]" label="姓名：" prop="customerName">
				<el-input v-model.trim="customerInfoForm.customerName" clearable placeholder="请输入姓名"></el-input>
			</el-form-item>
			<el-form-item label="性别：" prop="customerSex">
				<el-select v-model="customerInfoForm.customerSex" placeholder="请设置性别">
					<el-option label="男" value="男"></el-option>
					<el-option label="女" value="女"></el-option>
					<el-option label="其他" value="其他"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item
				label="手机号："
				prop="customerPhone"
				:rules="[
					{ required: true, message: '请输入手机号', trigger: 'blur' },
					{ validator:(rule, value, callback)=> { validatePhone(true, value, callback) }, trigger: 'blur' }
				]"
			>
				<el-input v-model.number="customerInfoForm.customerPhone" clearable placeholder="请输入手机号"></el-input>
			</el-form-item>
			<el-form-item label="地址：" prop="customerAddress">
				<el-input v-model="customerInfoForm.customerAddress" clearable placeholder="输入目前居住地址"></el-input>
			</el-form-item>
			<el-form-item label="说明：" prop="remarks">
				<el-input v-model="customerInfoForm.remarks" clearable placeholder="说明/备注" type="textarea"></el-input>
			</el-form-item>
		</el-form>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="$emit('update:visible', false)">取消</el-button>
				<el-button type="primary" @click="submit">确定</el-button>
			</span>
		</template>
  </el-dialog>
</template>

<script setup>
import { ref, watchEffect, nextTick } from 'vue'
import { getDialogHeight } from '@/utils/utils'
import { validatePhone } from '@/utils/validate'
import { addCustomer, updateCustomer } from '@/api/myNodeSrverTest'
import { ElMessage } from 'element-plus'
const props = defineProps({
  isAdd: Boolean, // 是否是新增操作
	visible: Boolean, // 显示弹窗
	customerInfoIndex: {
		type: Number,
		default: -1
	}, // 顾客下标
	customerInfo: {
		type: Object, // 顾客信息记录
		default: ()=>{}
	}
})
const emit = defineEmits(['update:visible', 'updateCustomerInfo'])
const dialogVisible = ref(false) // 显示弹窗
const customerInfoForm = ref({}) // 顾客信息
const formRef = ref({})

// 监听器
watchEffect(async()=>{
	dialogVisible.value = props.visible
	if(props.visible) {
		await nextTick()
		getDialogHeight('.edit-customer-dialog', 200)
	}
	customerInfoForm.value = JSON.parse(JSON.stringify(props.customerInfo))
})

// 表单校验
function validateForm() {
	return new Promise((resolve, reject) => {
		if (!formRef.value) resolve()
		formRef.value.validate((valid) => {
			if (valid) {
				resolve()
			} else {
				reject()
			}
		})
	})
}

// 保存
async function submit() {
	const params = customerInfoForm.value
	try {
		await validateForm()
	} catch (error) {
		return console.log('表单校验失败', error || '')
	}
	try {
		let res = {}
		if(props.isAdd) { // 新增
			res = await addCustomer(params)
			emit('updateCustomerInfo')
		} else { // 修改
			res = await updateCustomer(params)
			emit('updateCustomerInfo', customerInfoForm.value, props.customerInfoIndex)
		}
		if(res.status === 200) {
			ElMessage.success(`${props.isAdd ? '添加' : '修改'}成功！`)
			emit('update:visible', false)
		}
	} catch (error) {
		console.log('保存 error---', error)
	}
}
</script>
<style lang="scss" scoped>
.edit-customer-dialog {
	.el-form {
		/deep/ .el-select .el-input__inner, .el-input {
			width: 240px;
		}
	}
}
</style>
